<template>
  <div>
        <el-card>
                <div slot="header" class="clearfix">
                    <breadcrump>粉丝管理</breadcrump>
                </div>
                 <el-tabs v-model="activeName" type="card">

        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans_list">
            <div class="fans_item" v-for="index in list" :key="index.id.toString()">
              <el-avatar :size="80" :src="index.photo"></el-avatar>
              <p>{{index.name}}</p>
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>

          <!-- 分页 -->

          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="per_page"
            @current-change="changePage"
            :total="total_count">
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="粉丝画像" name="img">
          <div ref="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>

      </el-tabs>
        </el-card>
  </div>
  
</template>

<script>
import axios from 'axios'
export default {
  name: 'my-fans',
  data () {
    return {
      // tabs的当前激活选项卡的name属性值
      activeName: 'list',
      per_page: 20,
      page: 1,
      list: [],
      total_count: 0,
      // 测试头像
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      curPage:1
    
    }
  },
  created(){
      this.loadFans () 
  },
  methods: {
    async loadFans () {
        const token = localStorage.getItem('tokenInfo')
        const result = await axios({
            method:'get',
            url:'http://ttapi.research.itcast.cn/mp/v1_0/followers',
            params:{
                page:this.curPage,

            },
            headers:{
          Authorization:`Bearer ${token}`
        },
        })
        console.log(result)
        this.total_count=result.data.data.total_count
        this.list = result.data.data.results
    },
    changePage(curPage){
        this.curPage=curPage
        this.loadFans()
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>